<template>
	<div id="login">
		<img src="../../static/img/login-agent.png"/>
		<div class="login_form">
			<h3>商家登录</h3>
			<div class="input">
				<img src="../../static/img/login-1.png"/>
				<input type="text" placeholder="请输入账号" v-model="user" />
			</div>
			<div class="input">
				<img src="../../static/img/login-5.png"/>
				<input type="password" placeholder="请输入密码" v-model="Password" />
			</div>
			<div class="validate">
				<div>
					<img src="../../static/img/login-2.png"/>
					<input type="text" v-model="code" placeholder="请输入验证码" />
				</div>
				<div class="code" @click="refreshCode">
				    <identify :identifyCode="identifyCode"></identify>
				</div>
				<!--<img src="../../static/img/validate.png"/>-->
			</div>
			<div class="forget">
				<p>没有账号?<router-link to="/IDoperation/register" >前往注册</router-link></p>
				<router-link to="/IDoperation/forget" >忘记密码?</router-link>
			</div>
			<input id="sub" @click="login" type="button" value="登录" />
		</div>
	</div>
</template>

<script>
export default{
	name: 'login',
	data:function(){
		return{
			user: '',
			Password: '',
			identifyCodes: "1234567890",
     		identifyCode: "",
     		code:'',
		}
	},
	mounted: function() {
	    this.identifyCode = "";
	    this.makeCode(this.identifyCodes, 4);
	},
	methods:{
		login: function(){
			var _this = this;
			if(_this.user==''){
				_this.$alert("2","账户名不能为空");
				return;
			}
			if(_this.Password==''){
				_this.$alert("2","密码不能为空");
				return;
			}
			if(_this.code!=_this.identifyCode){
				_this.$alert("2","验证码输入错误");
				_this.refreshCode();
				return;
			}
			if(!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(_this.user)){
				_this.$alert("2","手机号格式错误");
				return;
			}
			let postData = _this.$qs.stringify({
			    username:_this.user,
			    password:_this.Password
			});
			_this.$axios.post('/agent/autho/public/authority',postData).then(function(res){
			    if(res.data.message == 'succ'){
			    	localStorage.setItem(`token`,res.data.result);
					let redirect = decodeURIComponent(_this.$route.query.redirect || '/agent/agentCenter');
			        _this.$router.push({
			            path: redirect
			        })
			    }else{
			    	_this.$alert('2','账号或密码错误');
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		randomNum(min, max) {
	      return Math.floor(Math.random() * (max - min) + min);
	    },
	    refreshCode() {
	      this.identifyCode = "";
	      this.makeCode(this.identifyCodes, 4);
	    },
	    makeCode(o, l) {
	      for (let i = 0; i < l; i++) {
	        this.identifyCode += this.identifyCodes[
	          this.randomNum(0, this.identifyCodes.length)
	        ];
	      }
	    }
	}
}
</script>


<style scoped>
.validate .code {
  margin: 400px auto;
  width: 114px;
  height: 40px;
  padding: 0 !important;
  margin-left: 5px;
}
.code div{
  padding: 0 !important;
}
#login{
	padding-top: 20px;
	width: 1000px;
	margin: 0 auto;
	height: calc(100% - 117px);
	min-height: 603px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}
#login>img{
	height: 410px;
	display: block;
}
.login_form{
	width: 350px;
	background-color: #fff;
	box-shadow: 0 0 10px #CCCCCC;
	padding: 50px 0;
}
.login_form h3{
	color: #FF464E;
	font-size: 20px;
	text-align: center;
}
.input input{
	border: none;
	background-color: rgba(0,0,0,0);
	width: 230px;
}
.input,.validate{
	width:80%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	padding-left: 10px;
	margin-top: 20px;
	border: 1px solid #EEEEEE;
	height: 34px;
	box-sizing: border-box;
}
.validate{
	padding-left: 0;
	border: none;
}
.input img,.validate div img{
	height: 20px;
	width: 20px;
	margin-right: 10px;
}
.validate>img{
	width: 110px;
	height: 100%;
	display: block;
}
.validate div{
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: 10px;
	border: 1px solid #EEEEEE;
	box-sizing: border-box;
}
.validate{
	justify-content: space-between;
	overflow: hidden;
}
.validate input[type="text"]{
	width: 120px;
	border: none;
	background-color: rgba(0,0,0,0);
	height: 100%;
}
.validate input[type="button"]{
	width: 110px;
	height: 100%;
	border: 1px solid #FF464E;
	color: #FF464E;
	background-color: #FFFFFF;
}
.forget{
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	margin-top: 10px;
	color: #9F9F9F;
	-webkit-user-select: none;
}
.forget a{
	display: inline-block;
	color: #3ea4ed;
}
#sub{
	width: 80%;
	display: block;
	margin: 0 auto;
	background-color: #FF464E;
	color: #FFFFFF;
	font-size: 16px;
	height: 36px;
	border: none;
	border-radius: 50px;
	margin-top: 20px;
}
</style>
